<template>
  <el-dialog
    title="添加门禁"
    :visible="$store.state.gate_info_dialog"
    width="40%"
    @close="closeGateInfoDialog"
  >
    <el-form
      :model="wx_gate_form"
      :rules="rules"
      label-width="100px"
      ref="wx_gate_form"
    >
      <el-form-item label="闸门名" prop="gateName">
        {{ wx_gate_form.gateName }}
      </el-form-item>
      <el-form-item label="闸门编号" prop="gateCode">
        {{ wx_gate_form.gateCode }}
      </el-form-item>
      <el-form-item label="单价1" prop="price1">
        <el-input-number
          v-model="wx_gate_form.price1"
          :precision="2"
          :step="0.1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="准入时间1" prop="price1times">
        <el-time-picker
          is-range
          v-model="wx_gate_form.price1times"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="单价2" prop="price2">
        <el-input-number
          v-model="wx_gate_form.price2"
          :precision="2"
          :step="0.1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="准入时间2" prop="price2times">
        <el-time-picker
          is-range
          v-model="wx_gate_form.price2times"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="单价3" prop="price3">
        <el-input-number
          v-model="wx_gate_form.price3"
          :precision="2"
          :step="0.1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="准入时间3" prop="price3times">
        <el-time-picker
          is-range
          v-model="wx_gate_form.price3times"
          value-format="HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveGate">保存</el-button>
        <el-button @click="closeGateInfoDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import WxGate from "@/api/WxGate";
import { mapMutations } from "vuex";

export default {
  components: {},
  props: {
    wxGateInfo: Object,
    addFlag: Boolean
  },
  data() {
    return {
      wxGateApi: null,
      wx_gate_form: {
        gateName: "",
        gateCode: "",
        price1times: null,
        price2times: null,
        price3times: null,
        price1: "",
        price1BeginTime: "",
        price1EndTime: "",
        price2: "",
        price2BeginTime: "",
        price2EndTime: "",
        price3: "",
        price3BeginTime: "",
        price3EndTime: ""
      },
      rules: {
        price1: [{ required: true, message: "请输入单价", trigger: "blur" }],
        price2: [{ required: true, message: "请输入单价", trigger: "blur" }],
        price3: [{ required: true, message: "请输入单价", trigger: "blur" }],
        price1times: [
          { required: true, message: "请选择时间", trigger: "blur" }
        ],
        price2times: [
          { required: true, message: "请选择时间", trigger: "blur" }
        ],
        price3times: [
          { required: true, message: "请选择时间", trigger: "blur" }
        ]
      },
      isAdd: true
    };
  },
  computed: {
    gateInfoFlag() {
      return this.$store.state.gate_info_dialog;
    }
  },
  watch: {
    gateInfoFlag(val) {
      if (val) {
        this.wx_gate_form = this.wxGateInfo;
        this.isAdd = this.addFlag;
      }
    }
  },
  created() {
    this.wxGateApi = new WxGate();
  },
  methods: {
    ...mapMutations(["changeGateInfoDialog"]),
    saveGate() {
      this.$refs["wx_gate_form"].validate(valid => {
        if (valid) {
          this.wx_gate_form.price1BeginTime = this.wx_gate_form.price1times[0];
          this.wx_gate_form.price1EndTime = this.wx_gate_form.price1times[1];
          this.wx_gate_form.price2BeginTime = this.wx_gate_form.price2times[0];
          this.wx_gate_form.price2EndTime = this.wx_gate_form.price2times[1];
          this.wx_gate_form.price3BeginTime = this.wx_gate_form.price3times[0];
          this.wx_gate_form.price3EndTime = this.wx_gate_form.price3times[1];
          delete this.wx_gate_form.price1times;
          delete this.wx_gate_form.price2times;
          delete this.wx_gate_form.price3times;
          if (this.isAdd) {
            this.wxGateApi.add(this.wx_gate_form, res => {
              if (res.code === 0) {
                this.$message.success("添加成功");
                this.closeGateInfoDialog();
              }
            });
          } else {
            this.wxGateApi.update(this.wx_gate_form, res => {
              if (res.code === 0) {
                this.$message.success("修改成功");
                this.closeGateInfoDialog();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    closeGateInfoDialog() {
      this.changeGateInfoDialog(false);
    }
  }
};
</script>

<style lang="scss" scoped></style>
